<template>
  <div class="commonModal">
    <a-config-provider :locale="locale">
      <a-modal :visible="modalVisible" :title="modalTitle" @ok="handleOk" @cancel="handCancel" width="900px">
        <a-input-search
          placeholder="请输入"
          style="width: 200px"
          @search="onSearch"
          v-model="manager"
        />
        <div class="personBox" v-if="selectType === 'radio' || selectType === 'more-check'">
          <div class="nameTitle" v-if="usedPeople">
            近期使用人员
          </div>
          <div class="nameTitle" v-else>
            搜索人员
          </div>
          <div class="searchPeople">
            <a-checkbox v-for="(item, index) in managerList" :key="index" @change="onChange(item)" :checked="item.checked" >
              <div class="itemBox">
                <div class="boxLeft" :title="`${item.name}(${item.userId})`">{{ item.name }} ({{item.userId}})</div>
                <div class="boxRight" :title="item.department">{{ item.department }}/{{item.post}}</div>
              </div>
            </a-checkbox>
          </div>
        </div>
      </a-modal>
    </a-config-provider>
  </div>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { searchUserIdMiddle } from "@api/singleProject"
import { Message } from "ant-design-vue";
export default {
  name: "commonModal",
  props: {
    title:{
      type: String,
      default: '关联项目经理'
    },
    modalVisible: {
      type: Boolean,
      default: false
    },
    selectType: {
      type: String,
      default: ""
    },
    itemArr: {
      type: Array,
      default: ()=>[]
    },
    modalTitle:{
      type: String,
      default: "关联项目经理"
    },
  },
  data() {
    return {
      locale: zhCN,
      managerList: this.itemArr,
      manager: "",
      selectValue: {},
      usedPeople: true,
    }
  },
  watch: {
    itemArr: {
      handler(n) {
        n.map(i=>{
          return i.checked = false
        })
        this.managerList = n
      }
    }
  },
  methods: {
    handleOk() {
      if (this.selectType === 'more-check'){
        this.$emit("handleOk", this.managerList.filter(item => item.checked));
      }else {
        this.$emit("handleOk", this.selectValue);
      }
      this.managerList = []
      this.manager= ""
      this.usedPeople = true
    },
    handCancel() {
      this.usedPeople = true
      this.selectValue = {}
      this.manager= ""
      this.$emit("handCancel");
    },
    onSearch(value) {
      if(value){
        this.usedPeople = false
        let nameList = []
        nameList.push(value)
        let params = {
          match: false,
          names: nameList,
        }
        console.log(value,'value');
        searchUserIdMiddle(params).then(res=>{
          const newData = res.data.filter((item) => item.userId)
          newData.map(item=>{
            item.checked = false
          })
          newData.sort(this.compare('name'))
          this.managerList = newData
        })
      }else{
        Message.error('搜索关键词不能为空')
      }
    },
    // 数组排序
    compare(property){
      return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1.length - value2.length;
      }
    },
    onChange(e) {
      this.managerList.forEach(item => {
        if (e.userId === item.userId) {
          item.checked = !item.checked
        } else if (this.selectType === 'radio'){
          item.checked = false
        }
      })
      // 传输选中的人名
      if (e.checked) {
        this.selectValue = e
      } else {
        this.selectValue = {}
      }
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-modal-content {
  .ant-modal-body {
    .personBox {
      border: 1px solid #d9d9d9;
      margin-top: 10px;
      .nameTitle {
        padding: 6px 8px;
        border-bottom: 1px solid #d9d9d9;
      }
      .nameList {
        padding: 6px 8px;
      }
      .searchPeople{
        height: 332px;
        max-height: 332px;
        overflow: auto
      }
      // .ant-checkbox-group {
      //   display: block;
      //   padding: 6px 8px;
        .ant-checkbox-wrapper {
          padding: 4px 8px;
          display: block;
          margin-right: 0px;
          margin-left: 0px;
          .ant-checkbox + span {
            display: inline-block;
            width: 96%;
            padding-right: 0px;
            .itemBox {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .boxLeft{
                width: 30%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .boxRight{
                padding-left: 30px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      // }
    }
  }
}
/deep/.ant-modal-wrap {
  z-index: 1004;
}
</style>